<template>
    <div class="top-bar" :class="{padding:!showBack}">
        <div class="back-button" @click="$router.back()" v-show="showBack">
            <i class="icon-back oa-icon back-icon"></i>
        </div>
        <div class="top-bar-title">
            {{title}}
        </div>
        <div class="right-actions">
            <div class="right-action-button" v-for="(item,index) in rightButtons" @click="rightActionClick(item,index)">
                <i class="oa-icon" :class="item.icon"></i>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "oa-top-bar",
        props: {
            title: {
                type: String,
                default: ""
            },
            showBack: {
                type: Boolean,
                default: false
            },
            rightButtons: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        methods: {
            rightActionClick(item, index) {
                this.$emit("rightActionClick", item, index)
            }
        }
    }
</script>

<style lang="less" scoped>
    .top-bar {
        background: #fff;
        border-bottom: solid 1px #e0e0e0;
        height: 44px;
        display: flex;
        align-items: center;
        flex-direction: row;
        &.padding {
            padding: 0 12px;
        }
        .back-button {
            width: 44px;
            height: 44px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .back-icon {
                font-size: 24px;
                color: #2c2c2c;
            }
        }
        .top-bar-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c2c2c;
        }
        .right-actions {
            margin-left: auto;
            display: flex;
            flex-direction: row;
            .right-action-button {
                color: #41a6f0;
                width: 44px;
                height: 44px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                &:active {
                    .oa-icon {
                        font-size: 24px;
                        color: lighten(#41a6f0, 10%);
                    }
                    background: darken(#fff, 5%);
                }
                .oa-icon {
                    font-size: 24px;
                    color: #41a6f0;

                }

            }
        }
    }
</style>